<template>
  <div>
<van-nav-bar class='title'  title="房屋管理"  left-arrow  @click-left="$router.back()"/>
<div class="houseitem"  v-for="(item,index) in list" :key="index">
  <div class="left">
    <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="">
  </div>
  <div class="right">
    <p class="title">{{item.title}}</p >
    <p class="size">{{item.desc}}</p >
    <span>{{item.tags}}</span>
    <p class="price">{{item.price}}</p >
  </div>
</div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data () {
    return {
      list:[]
    }
  },
  created () {
    this.userList()
  },
  methods: {
    async userList () {
      const res = await request.get('/user/houses')      
      console.log(res)
      this.list = res.body
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  background-color:#56b27b ;
}
/deep/ .van-nav-bar__title{
  color: #fff;
}
/deep/ .van-nav-bar__left .van-icon{
  color: #fff;
}
.houseitem{
  height: 120px;
  border-bottom: 1px solid #ccc;
  display: flex;
  .left{
    margin-top: 20px;
    img{
      width: 106px;
      height: 80px;
    }
  }
  .right{
    margin-left: 13px;
    .title{
       font-size: 15px;
       color: #000;
       font-weight: 700;
       margin-top: 20px;
    }
    .size{
      color: #b0b2b3;
      font-size: 12px;
      margin-top: -10px;
    }
    span{
      background-color:#e5f4f7;
      color: #61bbca;
      font-size: 14px;
      margin-top: -10px;
    }
    .price{
      font-size: 12px;
      color: #fa5741;
      margin-top: 5px;
    }
  }
}
</style>